<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
        <title>Deposits and Withdrawals</title>
        <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
        <script src="http://cdn.bootcss.com/vue/1.0.24/vue.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">


		<script type="text/javascript">
			$(function () {
				new Vue({
					el:'#_come_on',
					data:{
						choices:[{value:'1',label:'xx'},{value:'2',label:'22'}],
						selected:['1']
					},
				
					methods:{
						function (first_argument) {
							
							return true;
						}
					}
				})
			})
			Vue.component('multi-sel',{
				template:'#multi-sel',
				props:{
					choices:{},
					selected:{
						twoWay:true
					},
					size:{
						default:6
					}
				},
				data:function () {
					return {
						selected__:[],
						left_sel:[],
						right_sel:[]
					}
				},
				compiled:function () {
					for (var x=0;x<this.selected.length;x++){
						for(var y =0; y<this.choices.length;y++){
							if(this.choices[y].value==this.selected[x]){
								this.selected__.push(this.choices[y])
								this.choices.splice(y,1)
								break
							}
						}
					}
					
				},
				methods:{
					add:function (opt) {
						this.selected__.push(opt)
						this.selected.push(opt.value)
						var index = this.choices.indexOf(opt)
						if(index!=-1){
							this.choices.splice(index,1)
						}
						this.left_sel=[]
					},
					rm:function (opt) {
						var index = this.selected__.indexOf(opt)
						if(index!=-1){
							this.selected__.splice(index,1)
						}
						var index_2 = this.selected.indexOf(opt.value)
						if(index_2!=-1){
							this.selected.splice(index_2,1)
						}
						this.choices.push(opt)
						this.right_sel=[]
					},
					batch_add:function () {
						var tmp_ls = this.left_sel
						for(var x=0;x<tmp_ls.length;x++){
							for(var y=0;y<this.choices.length;y++){
								if(this.choices[y].value==tmp_ls[x]){
									this.add(this.choices[y])
									break;
								}
							}
						}
					},
					batch_rm:function () {
						var tmp_ls = this.right_sel
						for(var x=0;x<tmp_ls.length;x++){
							for(var y=0;y<this.selected__.length;y++){
								if(this.selected__[y].value==tmp_ls[x]){
									this.rm(this.selected__[y])
									break;
								}
							}
						}
					}
				}
			})
		</script>
	</head>
    <body>
		<img src="http://oe8wu3kqs.bkt.clouddn.com/image/cross.png" alt="">
		<div id='_come_on'>
			<multi-sel :choices='choices' :selected.sync='selected'></multi-sel>
		</div>


<template id='multi-sel'>
	<div class='_multi_sel'>
		<select name="" id="" multiple="multiple" :size="size" class='sel' v-model='left_sel'>
			<option v-for='opt in choices |orderBy "label"' :value="opt.value" v-text='opt.label' @dblclick='add(opt)' ></option>
		</select>
		<div style='display: inline-block;vertical-align: middle;'>
			<img src="http://oe8wu3kqs.bkt.clouddn.com/image/right_02.png" alt="" 
				:class='["_small_icon",{"deactive":left_sel.length==0}]' @click='batch_add()'>
			<br>
			<img src="http://oe8wu3kqs.bkt.clouddn.com/image/left_02.png" alt="" 
				:class='["_small_icon",{"deactive":right_sel.length==0}]' @click='batch_rm()'>
		</div>
		
		<select name="" id="" multiple="multiple" :size="size" class='sel' v-model='right_sel'>
			<option v-for='opt in selected__ |orderBy "label"' :value="opt.value" v-text='opt.label' @dblclick='rm(opt)'></option>
		</select>
	</div>
</template>

<style type="text/css" media="screen" id="test">
	._multi_sel .sel{
		width:250px;
		display: inline-block;
		vertical-align: middle;
	}
	._multi_sel ._small_icon{
		width:15px;
	}
	._multi_sel ._small_icon.deactive{
		opacity: 0.5;
		-moz-opacity: 0.5;
		filter:alpha(opacity=50);
	}
</style>
    </body>
</html>